<template>
  <div id="folder">
    <Breadcrumb class="breadcrumb">
        <BreadcrumbItem :to="{name:'folder',params:{fid:'root'}}">根目录</BreadcrumbItem>
        <BreadcrumbItem v-if="isType">当前目录</BreadcrumbItem>
    </Breadcrumb>
    <Row class="folder-box" :gutter="16" v-if="folderItem">
      <Col :xs="12" :sm="8" :md="6" :lg="4">
      <div class="folderitem">
        <Card dis-hover>
          <div class="folderitemAdd">
            <div class="addLabel">+</div>
            <div class="folderitemCover">
              <Button long class="addbutton" @click="creatName(0)" v-if="$route.params.fid=='root'">新建文件夹</Button>
              <Button long class="addbutton" @click="creatName(1)" v-else>新建表格</Button>
            </div>
          </div>
        </Card>
        </div>
      </Col>
      <Col v-for="(item,i) in folderItem.item" v-if="item.type" :key="item.id" :xs="12" :sm="8" :md="6" :lg="4">
        <folderitem class="folderitem" :folderinfo="item" :numberList="i" @on-remove="itemRemove">123</folderitem>
      </Col>
    </Row>
    <Modal
        v-model="creatIsOpen"
        :title="'新建'+filelabel"
        @on-ok="addFile">
        给它取一个好听的名字吧
      <Input v-model="newF.name"></Input>
    </Modal>
    <!-- </ul> -->
  </div>
</template>

<script>
import folderitem from "%/template/folderitem";
// import json from "#/json/folder.json";
export default {
  name: "folder",
  data() {
    return {
      thisPath: null,
      folderItem: null,
      tmpData: null,
      creatIsOpen: false,
      newF: {
        type: null,
        name: null
      }
    };
  },
  mounted() {
    // window._PAGE_FORX = this.$root;
    this.renderFolder();
  },
  methods: {
    renderFolder() {
      if (!this.isType) {
        this.$http({
          url: "excel_getFolders"
        })
          .then(re => {
            let data = re.body;
            this.folderItem = data;
          })
          .catch(re => {
            this.$Message.error("请求失败");
          });
      } else {
        this.$http({
          url: "excel_getExcel",
          params: {
            "folders.fid": this.$route.params.fid
          }
        })
          .then(re => {
            let data = re.body;
            this.folderItem = data;
          })
          .catch(re => {
            this.$Message.error("请求失败");
          });
      }
    },
    addFile() {
      const user = this.$root.bus.user;
      if (this.newF.type == 0) {
        // 文件夹
        this.$http({
          url: "excel_addFolders",
          params: {
            "folders.fname": this.newF.name,
            "folders.type": "folder",
            "folders.icon": "folder"
          }
        })
          .then(data => {
            this.folderItem = data.body;
          })
          .catch(() => {
            this.$Message.error("请求失败");
          });
      } else {
        // 添加表格
        this.$http({
          url: "excel_addExcel",
          params: {
            "folders.fid": this.$route.params.fid,
            "excel.ename": this.newF.name,
            "excel.type": "table",
            "excel.icon": "table"
          }
        })
          .then(re => {
            this.folderItem = re.body;
            console.log(re.body);
          })
          .catch(re => {
            console.log("err");
          });
      }
      this.newF.type = null;
      this.newF.name = null;
    },
    creatName(x) {
      this.newF.type = x;
      this.creatIsOpen = true;
    },
    itemRemove(i) {
      let it = this.folderItem.item;
      it.splice(i, 1);
    }
  },
  computed: {
    filelabel() {
      switch (this.newF.type) {
        case 0:
          return "文件夹";
          break;
        case 1:
          return "表格";

        default:
          return "其他文件";
          break;
      }
    },
    isType() {
      return this.$route.params.fid != "root";
    }
  },
  components: { folderitem },
  watch: {
    $route(n, o) {
      this.renderFolder();
    }
  }
};
</script>

<style lang="less" scoped>
#folder {
  .breadcrumb {
    background-color: #fff;
    padding: 8px;
  }
  .folder-box {
    padding: 0 8px;
    .folderitem {
      margin: 1.5rem 0;
      height: 100px;
      .folderitemAdd {
        height: 95px;
        .addLabel {
          color: #ddd;
          text-align: center;
          line-height: 100px;
          font-size: 2rem;
        }
        .folderitemCover {
          background-color: #fff;
          padding: 30px 8px;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          transition: all 0.4s;
          width: 100%;
          .addbutton {
            margin-top: 8px;
          }
        }
      }
      &:hover .folderitemCover {
        opacity: 1;
      }
    }
  }
}
</style>